<template>
    <div class="uploadwrap">
        <el-row :gutter="24">
            <h1 class="title">上传资源封面</h1>
            <el-col :span="10">
                <el-upload
                    class="upload-demo"
                    ref="upload"
                    drag
                    :action="actionURL"
                    name = "file"
                    list-type="picture"
                    :on-progress="onprogress"
                    :on-remove="handleRemove"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-error="handleAvatarError"
                    :auto-upload="false"
                    :on-exceed="handleexceed"
                    :limit="limitPoster">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb<br>
                        <el-button type="primary" v-waves style="margin: 5px 0;" @click="doImgUpload">点击上传</el-button>
                    </div>
                </el-upload>
            </el-col>
            <el-col :span="10">
                <el-form :model="ruleForm" :rules="ruleFormrules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="" prop="poster" hidden>
                        <el-input v-model="ruleForm.poster" ></el-input>
                    </el-form-item>
                    <el-form-item label="资源类型" prop="resourceFlag">
                        <el-select v-model="ruleForm.resourceFlag" placeholder="请选择类型">
                        <el-option label="电影" value="01"></el-option>
                        <el-option label="电视剧" value="02"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类地区" prop="areaId">
                        <el-select v-model="ruleForm.areaId" placeholder="请选择地区">
                                <el-option
                                v-for="item in areaId"
                                :key="item.areaId"
                                :label="item.areaName"
                                :value="item.areaId">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类类型" prop="typeId">
                        <el-select v-model="ruleForm.typeId" placeholder="请选择类型">
                            <el-option
                            v-for="item in typeId"
                            :key="item.typeId"
                            :label="item.typeName"
                            :value="item.typeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="ruleForm.title" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="副标题" prop="subtitle">
                        <el-input v-model="ruleForm.subtitle" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="上架状态" prop="shelfState">
                        <el-select v-model="ruleForm.shelfState" placeholder="请选择状态">
                            <el-option label="上架" value="01"></el-option>
                            <el-option label="下架" value="02"></el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item label="是否VIP" prop="vipFlag">
                        <el-radio-group v-model="ruleForm.vipFlag" size="medium">
                            <el-radio border label="01">是</el-radio>
                            <el-radio border label="02">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否推荐" prop="isRecommend">
                        <el-radio-group v-model="ruleForm.isRecommend" size="medium">
                            <el-radio border label="01">推荐</el-radio>
                            <el-radio border label="02">不推荐</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="关键字" prop="keywords">
                        <el-input type="textarea" v-model="ruleForm.keywords"></el-input>
                    </el-form-item>
                    <el-form-item label="热度" prop="hotDegree">
                        <el-input type="number" v-model="ruleForm.hotDegree"></el-input>
                    </el-form-item> 
                    <el-form-item label="详情介绍" prop="introduce">
                        <el-input type="textarea" v-model="ruleForm.introduce"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-waves :loading="submitLoad" @click="submitForm('ruleForm')">立即提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import waves from '@/directive/waves/index.js'
import { uploadBanner,submitDetail,getResourceAreas,getResourceTypes } from "@/api/index.js"
export default {
    directives: {
        waves
    },
    data() {
        return {
            submitLoad : false,
            actionURL : uploadBanner,
            fileList : [],
            percentage: 0,
            videopercentage: 0,
            posterurl : '',
            videourl : '',
            postername : '',
            videoname : '',
            acceptlist : ['image/jpeg','image/jpg','image/png'],
            acceptvideolist : ['audio/mp4','audio/avi','audio/rmvb'],
            limitPoster : 1,
            ruleForm: {
                title : '',
                subtitle : '',
                introduce : '',
                resourceFlag : '',
                vipFlag : '',
                shelfState : '',
                keywords : '',
                areaId : '',
                typeId : '',
                isRecommend : '',
                hotDegree : '',
                poster : ''
            },
            areaId : '',
            typeId : '',
            ruleFormrules: {
                poster :[
                    { required: true, message: '请上传封面', trigger: 'change' }
                ],
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ],
                subtitle : [
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ],
                introduce: [
                    { required: true, message: '请输入介绍内容', trigger: 'blur' }
                ],
                resourceFlag: [
                    { required: true, message: '请至少选择一个分类', trigger: 'change' }
                ],
                vipFlag: [
                    { required: true, message: '请选择是否', trigger: 'change' }
                ],
                shelfState: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],
                keywords: [
                    { required: true, message: '请输入关键字', trigger: 'blur' }
                ],
                areaId: [
                    { required: true, message: '请输入分类地区', trigger: 'blur' }
                ],
                typeId: [
                    { required: true, message: '请输入分类类型', trigger: 'blur' }
                ],
                isRecommend: [
                    { required: true, message: '请选择是否', trigger: 'blur' }
                ],
                hotDegree: [
                    { required: true, message: '请输入热度', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleexceed(files, fileList){
            const limitPoster = this.limitPoster > 1;
            if (!limitPoster) {
                this.$message.error('最多上传1张');
            }
            return  limitPoster;
        },
        onprogress(event, file, fileList){
            this.ruleForm.poster = file.name;
        },
        handleAvatarError(res, file){
            // console.log(res, file)
        },
        handleAvatarSuccess(res, file) {
            // console.log(res, file)
            // this.imageUrl = URL.createObjectURL(file.raw);
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        /////////////点击上传图片
        doImgUpload(){
            let that = this;
            that.$refs.upload.submit();
        },
        getArea(){
            let formData = {};
            getResourceAreas(formData).then(response => {
                if (response.data) {
                      this.areaId = response.data;
                } else {
                // this.$message.error(response.message);
                }
            }, response => {
            });
        },
        getType(){
            let formData = {};
            getResourceTypes(formData).then(response => {
                if (response.data) {
                      this.typeId = response.data;
                } else {
                // this.$message.error(response.message);
                }
            }, response => {
            });
        },
        submitForm(formName) {
        this.submitLoad = true;
        this.$refs[formName].validate((valid) => {
            if (valid) {   /////
                let formData = this.ruleForm;
                submitDetail(formData).then(response => {
                    if (response.code == '0') {
                        this.submitLoad = false;
                        this.$message('添加成功');
                    } else {
                        this.submitLoad = false;
                    // this.$message.error(response.message);
                    }
                }, response => {
                });
            } else {
                if(!this.ruleForm.poster){
                    this.$message.error("还未上传封面");
                }
                this.submitLoad = false;
                console.log('error submit!!');
                return false;
            }
            });
        },
        ///////重置信息表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    mounted(){
        this.getArea();
        this.getType();
    }
}
</script>
<style lang="scss" scope>
   .uploadwrap{
       .title{
            font-weight: bold;
            color: #9e9e9e;
            padding: 10px 0;
            margin: 20px 0 40px 0;
            border-bottom: 1px solid #E0E0E0;
       }
       .upload-demo{
            .el-icon-upload{
                font-size: 67px;
                color: #C0C4CC;
                margin: 40px 0 16px;
                line-height: 50px;
            }
       }
       .filelist{
            border: 1px solid #ccc;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            .posterimg{
                display: block;
                width: 100px;
                height: 100px;
                font-size: 80px;
                text-align: center;
                float: left;
                margin: 0 20px 0 0;
            }
            .el-icon-delete{
                font-size: 25px;
                width: 30px;
                height: 30px;
                margin-top: 40px;
                position: absolute;
                right: 10%;
                top: 0;
                cursor: pointer;
            }
            h5{
                line-height: 100px;
            }
        }
   }

</style>>